<template>
  <div id="Login">
    <div class="formCard">
      <div class="title">移动云登录</div>
      <Form
        class="form"
        ref="formInline"
        :model="formInline"
        :rules="ruleInline"
      >
        <FormItem class="item1" prop="user">
          <Input
            style="width:250px;"
            type="text"
            v-model="formInline.user"
            placeholder="请输入账号"
            size="large"
          >
            <Icon type="ios-person-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
        <FormItem class="item2" prop="password">
          <Input
            style="width:250px;"
            type="password"
            v-model="formInline.password"
            placeholder="请输入密码"
            size="large"
          >
            <Icon type="ios-lock-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
        <FormItem class="item3">
          <Button
            type="primary"
            @click="handleSubmit('formInline')"
            size="large"
            >登录</Button
          >
        </FormItem>
      </Form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      formInline: {
        user: "",
        password: null,
      },
      ruleInline: {
        user: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            type: "string",
            min: 6,
            max: 18,
            message: "密码长度为6-18个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        // 输入为空的时候重新输入
        if (!valid) return;
        // 输入不为空的时候进行校验
        if (valid) {
          this.$http
            .get("/api/login", {
              params: {
                username: this.formInline.user,
                password: this.formInline.password,
              },
            })
            .then((res) => {
              //获取后端传来的数据
              let { code, message } = res.data;
              let userInfo = {
                token: res.data.token,
                userName: res.data.userName,
              };
              if (code === 0) {
                this.$Message.success(message);
                // 将后端返回的token值存储在客户端
                window.sessionStorage.setItem(
                  "userInfo",
                  JSON.stringify(userInfo)
                );
                // 进行路由跳转
                this.$router.replace({ path: "/home" });
              } else {
                this.$Message.error(message);
              }
            })
            .catch((error) => {
              console.log(error);
            });
        }
      });
    },
  },
};
</script>

<style scoped>
#Login {
  width: 100%;
  height: 100%;
  /* height: 100px; */
  background-image: url(../assets/images/bg.png);
  background-size: cover;
}
.formCard {
  width: 600px;
  height: 400px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: aliceblue;
  border-radius: 5px;
}
.formCard > .title {
  font-size: 28pt;
  font-weight: 800;
  text-align: center;
  padding: 25px 0 25px 0;
}
.formCard > .form > .item1,
.item2 {
  width: 250px;
  margin: 30px auto;
}
.formCard > .form > .item3 {
  width: 250px;
  margin: 60px auto;
  text-align: center;
}
.formCard > .form > .item3 button {
  width: 200px;
}
</style>
